import { FC, useCallback, useEffect } from 'react';
import { observer, useLocalStore } from 'mobx-react';
import { useNavigate } from 'react-router';

import riceBall from '@assets/images/riceBall.png';
import { globalStore } from '@/stores/global';
import Button from '@/components/Button';

import styles from './index.module.less';
import LoginForm from './LoginForm';
import BottomLink from './BottomLink';

const isTest = import.meta.env.MODE !== 'production';

const Login: FC = () => {
  const global = useLocalStore(() => globalStore);

  const navigate = useNavigate();

  useEffect(() => {
    // 回到登录页时清空所有storage并执行登出
    global.logoutUnAuthorize();
  }, []);

  const handleToTestPages = useCallback(() => {
    navigate('/test-pages');
  }, []);

  return (
    <div className={styles.rbLoginBodyWarp}>
      <div className={styles.rbLoginCardWarp}>
        <div className={styles.rbLoginCardLogoWarp}>
          <img className={styles.rbLoginCardLogo} src={riceBall} alt="" />
        </div>
        <div className={styles.rbLoginCardTitleWarp}>RiceBall管理系统-DEV</div>
        <LoginForm />
        <BottomLink />
        {isTest && (
          <Button type="link" onClick={handleToTestPages}>
            本地测试
          </Button>
        )}
      </div>
    </div>
  );
};

export default observer(Login);
